<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>海数云</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/plugs/wangEditor/style.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
<!--    <script src="/static/plugs/bootstrap/jquery.slim.min.js"></script>-->
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/static/plugs/wangEditor/index.js"></script>
    <script src="/initial.js"></script>
    <style>
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .search-header{
            width: 1440px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*border: 1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("/static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title a{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .search-input-wrap{
                width: 650px;
                height: 80px;
                display: flex;
                align-items: center;
                /*background: grey;*/
            }
            .search-input-wrap input{
                width: 650px;
                height: 60px;
                padding-left: 30px;
                border-radius: 40px;
                border:0.1pt solid rgba(220, 220, 220, 0.8);
            }
            .user-wrap{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .msg-wrap{
                    margin-right: 20px;
                    display: flex;
                    flex-direction: row;
                }
                .msg-icon{
                    width: 24px;
                    height: 24px;
                    margin-right: 5px;
                    background: url("/static/images/bell2.png") 100% 100%;
                    background-size: contain;
                }
                .user-img img{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                }
                .search-action{
                    /*border: 1px red solid;*/
                    width: 100px;
                    height: 40px;
                    margin-left: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 20px;
                    padding: 2px 10px;
                    background: #bfcdda;
                    color:#ffffff;
                    font-size: 18px;
                    font-weight: 400;
                }
            }
        }

        /*导航条布局*/
        .nav{
            width: 1440px;
            margin-top: 20px;
            height: 60px;
            font-size: 24px;
            border-radius: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /*background: #333333;*/
        }

        .works-wrap{
            padding: 20px 0;
            width: 1200px;
            /*border: 1px solid red;*/
            display: flex;
            flex-direction: column;
            .item{
                margin-bottom: 20px;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .item label{
                width: 100px;
                font-size: 20px;
                text-align: right;
            }
            .title-wrap input{
                width: 300px;
                height: 50px;
                font-size: 16px;
                border-radius: 5px;
                border: 0.1pt solid rgba(220, 220, 220, 0.5);
                padding-left: 20px;
            }
            .digest-wrap .digest{
                padding: 10px;
                width: 1100px;
                height: 200px;
                font-size: 16px;
                border-radius: 5px;
                border: 0.1pt solid rgba(220, 220, 220, 0.5);
            }
            .face-wrap .face{
                font-size: 32px;
                width: 160px;
                height: 130px;
                background: rgb(250, 250, 250);
                line-height: 130px;
                text-align: center;
            }
            .tag-wrap .tag{
                width: 1100px;
                height: 50px;
                font-size: 16px;
                border-radius: 5px;
                border: 0.1pt solid rgba(220, 220, 220, 0.5);
                padding-left: 20px;
            }
            .summary{
                width: 1200px;
                height: 80px;
                margin-top: 20px;
                border-top: 1px solid darkgray;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .summary div:nth-child(1){
                margin-left: 150px;
            }
            .summary div:nth-child(2){
                margin-right: 80px;
                display: flex;
                justify-content: center;
            }

            .store-works,.release-works{
                margin-right: 50px;
                width: 210px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                border-radius: 5px;
                background: #8B9CAC;
                color: #FFFFFF;
            }
        }

        #editor—wrapper {
            width: 1100px;
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
        #toolbar-container { border-bottom: 1px solid #ccc; }
        #editor-container {
            height: 500px;
        }

        /*footer布局*/
        .footer-wrap{
            display: flex;
            justify-content: center;
            background: #cccccc;
        }
        .footer{
            width: 1440px;
            height: 60px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            .outer-link{
                display: flex;
                justify-content: space-around;
            }
        }
        .outer-link div a{
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="search-header">
        <div class="search-title-wrap">
            <div class="search-title-icon"></div>
            <div class="search-title"><a href="/index.php">haishuyun</a></div>
        </div>
        <div class="search-input-wrap">
            <input class="search-input" placeholder="请输入查询内容...">
            <div class="search-icon"></div>
        </div>
        <div class="user-wrap">
            <div class="msg-wrap">
                <div class="msg-icon"></div>
                <div class="msg">消息</div>
            </div>
            <div class="user-img">
                <img src="/static/images/thumb.png" alt="暂无头像" onclick="toUser()">
            </div>
            <div class="search-action">
                <div>创作</div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div><a href="">关注</a></div>
        <div><a href="">头条</a></div>
        <div><a href="">知识</a></div>
        <div><a href="">政策法规</a></div>
        <div class="nav-product"><a href="/product.php">产品服务</a></div>
        <div><a href="">招聘</a></div>
        <div><a href="">人物</a></div>
        <div><a href="">分享</a></div>
        <div><a href="">企业</a></div>
    </div>
    <div class="works-wrap">
        <div class="item title-wrap">
            <label for="title">标题：</label>
            <input class="title" name="title" id="title" placeholder="请输入标题">
        </div>
        <div class="item chapter-wrap">
            <label for="chapter">内容：</label>
<!--            <input class="chapter" name="chapter" id="chapter">-->
            <div id="editor—wrapper">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-container"><!-- 编辑器 --></div>
            </div>
        </div>
        <div class="item digest-wrap">
            <label for="digest">摘要：</label>
            <textarea class="digest" name="digest" id="digest" placeholder="请输入摘要"></textarea>
        </div>
        <div class="item face-wrap">
            <label for="face">封面图：</label>
            <div class="face" id="face" onclick="uploadFace()">+</div>
        </div>
        <div class="item tag-wrap">
            <label for="tag">标签：</label>
            <input class="tag" name="tag" id="tag" placeholder="请输入标签">
        </div>
        <div class="summary">
            <div class="">文章共<span class="summary-num">1234</span>个字</div>
            <div class="summary-btn">
                <div class="store-works"><a href="javascript:void(0)" onclick="storeWorks()">存为草稿</a></div>
                <div class="release-works"><a href="javascript:void(0)" onclick="releaseWorks()">立即发布</a></div>
            </div>
        </div>
    </div>
</div>
<div class="footer-wrap">
    <div class="footer">
        <div class="copyright">Copyright © 2023 海数云 版权所有 渝ICP备2022012388号</div>
        <div class="outer-link">
            <div><a href="">用户协议</a></div>
            <div><a href="">隐私政策</a></div>
            <div><a href="">媒体合作</a></div>
            <div><a href="">广告合作</a></div>
            <div><a href="">友情链接</a></div>
            <div><a href="">反馈建议</a></div>
        </div>
    </div>
</div>
</body>
<script>

    $(document).ready(function(){
        $(".data-1x > img").attr('src', '/static/images/data-1x.jpg');
    })

    //storeWorks 保存作品
    function storeWorks(){
        alert('storeWorks');
    }

    //releaseWorks 保存作品
    function releaseWorks(){
        alert('releaseWorks');
    }

    //uploadFace
    function uploadFace(){
        alert('uploadFace');
    }

    function toUser(){
        window.location.href="/index.php";
    }
</script>
<script>
    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
            // 也可以同步到 <textarea>
        }
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })
</script>
</html>